<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据
        所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
        在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少
     -->
    <div id="app">
        <h1>插值语法</h1>
        <p>{{message}}</p>
        <h1>指令语法</h1>
        <!-- v-bind:完整语法 -->
        <a v-bind:href="url" v-bind:title="message">点我去尚硅谷学习Vue</a>
        <!-- v-bind:简写为: -->
        <a :href="url" :title="message">点我去尚硅谷学习Vue</a>
        <!-- v-bind:动态参数 -->
        <a :[key]="url">点我去尚硅谷学习Vue</a>
        <a v-bind:[key]="url">点我去尚硅谷学习Vue</a>
    </div>
    <script src="../JavaScript/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                message: "HelloVue",
                url: "http://www.atguigu.com",
                key: "href"
            }
        })
    </script>
</body>

</html>